<template>
  <view class="word-wrapper">
    <view class="word-content" v-if="!props.question.user_voice">
      <view class="word-label">请朗读单词练习发音</view>
      <sentence class="word-sentence" :sentence="wordSentence" />
      <loudspeaker class="word-loudspeaker" isAutoPlay :voice="props.question.us_voice" />
    </view>

    <view class="word-detail" v-else>
      <view class="detail-practice" :style="{ color: handleSetTextColor(props.question.score) }">
        <text class="score">{{ props.question.score }}</text>
        <text class="word">{{ props.question.practice }}</text>
      </view>
      <view class="detail-line"></view>
      <view class="detail-wrapper">
        <view class="wrapper-tag"></view>
        <view class="wrapper-header">
          <view class="wrapper-title">音素分析</view>
          <view class="wrapper-speaker">
            <loudspeaker class="speaker-loudspeaker" :voice="props.question.user_voice" />
            <text class="speaker-label">我的录音</text>
          </view>
        </view>
        <view class="wrapper-line"></view>
        <view class="wrapper-sound">
          <view class="sound-row">
            标准发音：{{ phoneme.char }}
            <text class="sound">{{ phoneme.phone_str }}</text>
          </view>
          <view class="sound-row">
            你的发音：{{ phoneme.char }}
            <rich-text class="sound" :nodes="phonemeNode"></rich-text>
          </view>
        </view>
        <view class="wrapper-line"></view>
        <view class="wrapper-label">
          <view class="label-item" v-for="item in labelList" :key="item.label">
            <view :class="['label-tag', item.label]"></view>
            <text class="label-text">{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import sentence from "@/components/sentence.vue";
import loudspeaker from "@/components/loudspeaker.vue";
import type { IPracticeList } from "./index";

interface IProps {
  question: IPracticeList;
}

const props = defineProps<IProps>();

const phoneme = ref<any>({});
const phonemeNode = ref<any[]>([]);
const wordSentence = ref({
  mark: {
    begin: "<b>",
    end: "</b>",
  },
  content: props.question.tag_practice,
})
const labelList = ref([
  {
    label: "Awesome",
  },
  {
    label: "Good",
  },
  {
    label: "Average",
  },
  {
    label: "Wrong",
  },
]);

// 0-40分 #DE4235 41-59分#FFAF00 60-79分#7EB6E6 80-100分 #B0BD3B
const handleSetTextColor = (score: number) => {
  if (score >= 0 && score <= 40) {
    return "#DE4235";
  } else if (score >= 41 && score <= 59) {
    return "#FFAF00";
  } else if (score >= 60 && score <= 79) {
    return "#7EB6E6";
  } else if (score >= 80 && score <= 100) {
    return "#B0BD3B";
  }
};

const handleSetPhoneme = () => {
  let soundColor = "";
  let childrenNodes: any[] = [
    {
      name: "span",
      attrs: {
        class: "rich-text_tag",
      },
      children: [
        {
          type: "text",
          text: "[",
        },
      ],
    },
  ];

  phoneme.value.phone.forEach((item: { score: number; char: string; }) => {
    if (item.score >= 0 && item.score <= 40) {
      soundColor = "rich-text_040";
    } else if (item.score >= 41 && item.score <= 59) {
      soundColor = "rich-text_4159";
    } else if (item.score >= 60 && item.score <= 79) {
      soundColor = "rich-text_6079";
    } else if (item.score >= 80 && item.score <= 100) {
      soundColor = "rich-text_80100";
    }

    childrenNodes.push({
      name: "span",
      attrs: {
        class: soundColor,
      },
      children: [
        {
          type: "text",
          text: item.char,
        },
      ],
    });
  });

  childrenNodes.push({
    name: "span",
    attrs: {
      class: "rich-text_tag",
    },
    children: [
      {
        type: "text",
        text: "]",
      },
    ],
  });

  phonemeNode.value = [{
    name: "div",
    attrs: {
      class: "rich-text_sentence",
    },
    children: childrenNodes,
  }];
}

watch(() => props.question.analysis, (val) => {
  if (val && val.phoneme) {
    phoneme.value = val.phoneme[0];
    handleSetPhoneme();
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<style scoped lang="scss">
@import "./common.scss";

.word-wrapper {
  width: 100%;

  .word-content {
    width: 100%;

    .word-label {
      margin-left: 2rem;
      margin-bottom: 11.3rem;
      font-size: 1.6rem;
      font-family: xiaolai;
      color: $uni-text-color;
    }

    .word-sentence {
      display: block;
      text-align: center;
      font-size: 4rem;
      font-family: baloo;
    }

    .word-loudspeaker {
      display: block;
      margin: 0 auto;
      width: 3.1rem;
      height: 3.1rem;
    }
  }
}
</style>